import React, { Component } from 'react';
import { connect } from 'dva';
import { Scrollbars } from 'react-custom-scrollbars';
import { Empty, Layout, message } from 'antd';
import { PageLoading } from '@ant-design/pro-layout';

import Dashboard from '@/components/Dashboard';
import LeftMenus from '@/components/LeftMenus';
import GlobalFooter from '@/layouts/GlobalFooter';
import styles from './index.less';
import TreeMenuContent from '@/components/TreeMenuContent';

const { Sider, Content } = Layout;

class $handle extends Component {

  constructor(props) {
    super(props);
    this.state = {
      selectedKey: ''
    }
    // console.log("$handle constructor()", this.props);

  }

  handleClickTreeMenu = (menuItem) => {
    this.setState({ selectedKey: menuItem.key });
    this.props.dispatch({type:'subModule/selectTreeMenu', payload: {selectedTreeMenu: menuItem}});
  }

  componentDidUpdate() {
    const { loading, $handle, dispatch, selectedModule } = this.props;
    if(!loading && selectedModule && $handle !== selectedModule.$handle) {
      const subModuleOrd = 'station:|h:' + selectedModule.$handle;
      dispatch({type: 'subModule/fetch', payload: {subModuleOrd}});
    }
  }

  componentWillUnmount() {
    this.props.dispatch({type: 'subModule/clearAll'});
  }

  componentWillReceiveProps(nextProps) {
    if(nextProps.selectedModule !== this.props.selectedModule) {
      this.setState({selectedKey: ''});
    }
  }

  // componentDidMount() {
  //   console.log("$handle componentDidMount()", this.props);
  // }

  render() {
    const { loading, moduleType, treeMenus, navOrd, selectedModule, $handle, $typeSpec, dispatch } = this.props;
    // console.log("$handle render()", this.props);
    if(loading || !selectedModule || $handle !== selectedModule.$handle) {
      return <PageLoading/>;
    }
    if(moduleType === 'DASHBOARD') {
      return (
        <Layout className={styles.subSystemPage} style={{background: 'transparent',overflow: 'hidden'}}>
          <Content className={styles.content} style={{background:'transparent',margin:0}}>
            <Scrollbars autoHide>
              <Dashboard dashboardRootOrd={`${navOrd}/dashboardRoot`}/>
            </Scrollbars>
          </Content>
          <GlobalFooter/>
        </Layout>
      );
    } else if(moduleType === 'TREE_MENU'||moduleType === 'REALTIME'||moduleType === 'HISTORY'|| moduleType === 'ALARM') {
      let { selectedKey } = this.state;
      if(!treeMenus || treeMenus.length === 0) {
        message.error('Tree Menu Root subnode is null!');
        return false;
      }
      let initTreeMenu = treeMenus?treeMenus[0]:{};
      if(treeMenus && treeMenus[0] && treeMenus[0].children) {
        initTreeMenu = treeMenus[0].children[0];
        if(treeMenus[0].children[0].children) {
          initTreeMenu = treeMenus[0].children[0].children[0];
        }
      }
      if(selectedKey === '') {
        selectedKey = initTreeMenu.key;
        dispatch({type:'subModule/selectTreeMenu', payload: {selectedTreeMenu: initTreeMenu}});
      }
      // console.log("$handle render() initTreeMenu", initTreeMenu);
      return (
        <Layout className={styles.subSystemPage}>
          <Sider theme='light' style={{backgroundColor: 'white', width: 300, maxWidth: 300, minWidth: 300}}>
            <Scrollbars autoHide>
              <LeftMenus menuList={treeMenus}
                         selectedKey={selectedKey}
                         menuClickCallback={this.handleClickTreeMenu}
              />
            </Scrollbars>
          </Sider>
          <Layout style={{overflow: 'hidden'}}>
            <Content className={styles.content}>
              <Scrollbars autoHide>
                <TreeMenuContent $typeSpec={$typeSpec}
                                 moduleType={moduleType}
                />
              </Scrollbars>
            </Content>
            <GlobalFooter className={styles.footer}/>
          </Layout>
        </Layout>
      );
    } else if(moduleType === 'TEXT') {
      return (
        <Empty
          className={'empty'}
          image='https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original'
          imageStyle={{
            height: 60,
          }}
          description={
            <span>{selectedModule.url}</span>
          }
        >
        </Empty>
      );
    } else if(moduleType === 'IMAGE') {
      return (<img
        alt='example'
        style={{width:'100%',height:'100%'}}
        src={selectedModule.url}
      />);
    } else if(moduleType === 'PAGE') {
      return false;
    } else if(moduleType === 'URL') {
      return false;
    }
    return false;
  }
}

export default connect(({ subModule, subSystem, loading }) => ({
  $handle: subModule.$handle,
  $typeSpec: subModule.$typeSpec,
  title: subModule.title,
  moduleType: subModule.moduleType,
  navOrd: subModule.navOrd,
  treeMenus: subModule.treeMenus,
  // subSystem: subSystem,
  selectedModule: subSystem.subModules[subSystem.selectedModuleIndex],
  loading: loading.effects['subModule/fetch'],
}))($handle);
